// src/components/RecursiveExample.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
} from 'react-router-dom';

/**
 * 人或朋友的 模拟数据集合
 * id {Number} 数据唯一标识
 * name {String} 人的名字
 * friends {Array} 朋友ID集合（这是一个关系型字段）
 */
const PEEPS = [
  { id: 0, name: 'Michelle', friends: [ 1, 2, 3 ] },
  { id: 1, name: 'Sean', friends: [ 0, 3 ] },
  { id: 2, name: 'Kim', friends: [ 0, 1, 3 ], },
  { id: 3, name: 'David', friends: [ 1, 2 ] }
];

/**
 * 搜索函数.
 * @param id {String} 数据唯一 ID 特征凭证
 * @return 结果数据集合 {Object}
 */
const find = (id) => PEEPS.find(p => p.id == id);

/* 递归例子 */
const RecursiveExample = () => (
  <Router>
    {/* 默认参数的 id 为 0，调用第一条数据展示 */}
    <Person match={{ params: { id: 0 }, url: '' }}/>
  </Router>
);

/** 返回人的信息展示，包含这人和他的朋友 */
const Person = ({ match }) => {
  // 返回参数 id.
  const person = find(match.params.id);

  return (
    <div>
      {/* 展示自己名字 */}
      <h3>{person.name}’s Friends</h3>
      <ul>
        {/* 遍历朋友集合. */}
        {person.friends.map(id => (
          <li key={id}>
            <Link to={`${match.url}/${id}`}>
              {find(id).name}
            </Link>
          </li>
        ))}
      </ul>
      {/* 放置一个路由，路径是匹配 URL 加后续 ID */}
      <Route path={`${match.url}/:id`} component={Person}/>
    </div>
  );
};

export default RecursiveExample;
